import React, { memo, useEffect } from "react"
import { shallowEqual, useDispatch, useSelector } from "react-redux"
import { DetailWrapper } from "./style"
import DetailPictures from "./c-cnps/detail-pictures"
import DetailInfos from "./c-cnps/detail-infos"
import { changeHeaderConfigAction } from "@/store/modules/main"

const Detail = memo(() => {
    const { detailInfo } = useSelector(
        (state) => ({
            detailInfo: state.detail.detailInfo,
        }),
        shallowEqual
    )
    const dispatch = useDispatch()
    useEffect(() => {
        dispatch(changeHeaderConfigAction({ isFixed: false, isHome: false }))
    }, [dispatch])
    return (
        <DetailWrapper>
            <DetailPictures pictureUrls={detailInfo.picture_urls} />
            <DetailInfos />
        </DetailWrapper>
    )
})

export default Detail
